<template>
  <TresObject3D>
    <component :is="elementTypeMap[item.type]" v-for="(item, index) in shapes" :key="index" :data="item" />
  </TresObject3D>
</template>
<script setup lang="ts">
import { GeometryShape, GeometryType } from '@/graph/3d/config/shapes'
import { use3DEditorStore, useFormulaEditor } from '@/store'
import { storeToRefs } from 'pinia'
import Cube from './Cube.vue'
import Cylinder from './Cylinder.vue'
import PointerObject from './Pointer.vue'
import Line from './Line.vue'
import Plane from './Plane.vue'
import Sphere from './Sphere.vue'
import Vector from './Vector.vue'
import Function from './Function.vue'

const editorStore = use3DEditorStore()
const formulaEditor = useFormulaEditor()
const { isCreating } = storeToRefs(editorStore)
const { shapes } = storeToRefs(formulaEditor)

const elementTypeMap = {
  [GeometryType.Cube]: Cube,
  [GeometryType.Cylinder]: Cylinder,
  [GeometryType.Line]: Line,
  [GeometryType.Function]: Function,
  [GeometryType.Pointer]: PointerObject,
  [GeometryType.Plane]: Plane,
  [GeometryType.Sphere]: Sphere,
  [GeometryType.Vector]: Vector,
}
const handlePointerDown = (item: GeometryShape) => {
  if (isCreating) return
  editorStore.setHandleElement(item)
}
</script>
